<div class="layer-container">
  <div class="layer-content">
    <div class="switcher" *ngIf="hasCheckbox">
      <nz-switch nzSize="small" [(ngModel)]="checked" [nzDisabled]="disabled" (ngModelChange)="visibleChange($event)"></nz-switch>
    </div>
    <div class="title">
      <nz-tooltip [nzTitle]="title">
        <span nz-tooltip>{{title}}</span>
      </nz-tooltip>
    </div>
    <div class="function-block loading-icon">
      <nz-spin [nzSpinning]="loading" [nzSize]="'small'"></nz-spin>
    </div>
    <div class="function-block" *ngIf="buttons.spaceQuery.visible">
      <nz-tooltip nzTitle="空间过滤">
        <button class="function-button" nz-tooltip [disabled]="buttons.spaceQuery.disabled" (click)="onSpatialQuery()">
          <nz-badge [nzDot]="buttons.spaceQuery.dot">
            <ng-template #content><i class="ege ege-filter-by-polygon"></i></ng-template>
          </nz-badge>
        </button>
      </nz-tooltip>
    </div>
    <div class="function-block" *ngIf="buttons.propertiesQuery.visible">
      <nz-tooltip nzTitle="属性过滤">
        <button class="function-button" nz-tooltip [disabled]="buttons.propertiesQuery.disabled" (click)="onPropertiesQuery()">
          <nz-badge [nzDot]="buttons.propertiesQuery.dot">
            <ng-template #content><i class="ege ege-filter-by-property"></i></ng-template>
          </nz-badge>
        </button>
      </nz-tooltip>
    </div>
    <div class="function-block" *ngIf="buttons.viewTable.visible">
        <nz-tooltip nzTitle="表格方式查看">
          <button class="function-button" nz-tooltip [disabled]="buttons.viewTable.disabled" (click)="useTableView()">
            <i class="ege ege-table"></i>
          </button>
        </nz-tooltip>
      </div>
    <div class="function-block" *ngIf="buttons.menubar.visible">
      <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
        <button class="function-button" nz-dropdown [disabled]="buttons.menubar.disabled">
          <i class="ege ege-menu-bar"></i>
        </button>
        <div nz-dropdown-custom class="layer-item-menu">
          <ng-content></ng-content>
        </div>
      </nz-dropdown>
    </div>
    <div class="function-block function-drag" *ngIf="draggable">
      <button class="function-button drag-button" ngxDragHandle>
        <i class="ege ege-drag"></i>
      </button>
    </div>
  </div>
  <div class="disabled-mask" *ngIf="disabled || loadError"></div>
  <div class="load-error-notice" *ngIf="loadError">
    <nz-tooltip [nzTitle]="'加载失败！'" [nzPlacement]="'left'">
      <div nz-tooltip class="load-error-notice-content">
        <span class="notice-icon">
          <i class="anticon anticon-cross-circle notice-icon-error"></i>
        </span>
        <button class="notice-operate-btn notice-operate-btn-reload" nz-button [nzType]="'primary'" [nzShape]="'circle'" title="重新加载" (click)="onClickReload()">
          <i class="anticon anticon-reload"></i>
        </button>
        <button class="notice-operate-btn notice-operate-btn-remove" nz-button [nzType]="'default'" [nzShape]="'circle'" title="移除" (click)="onClickRemove()">
          <i class="anticon anticon-close"></i>
        </button>
      </div>
    </nz-tooltip>
  </div>
</div>